<template>
  <el-container v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-header height="61px">
      <div class="flex ydsl-top" style="padding: 20px 50px;">
        <img src="../../static/images/logo.png" alt="">
        <div class="everyOtherOine"></div>
        <div class="ydslTitle ca0a0a0">生产工艺改进看板</div>
      </div>
    </el-header>
    <el-main class="elMain pppMain">
      <el-carousel trigger="click" :autoplay="true">
        <el-carousel-item v-for="(item,index) in pppData" :key="index">
          <el-row :gutter="20" class="pppMainElRow">
            <el-col :span="12" class="clear" v-for="(v,idx) in item.customer" :key="idx">
              <div class="pppMainElRowMain clear">
                <div class="fl wbfz49">
                  <div class="flex">
                    <div class="cfff lh26 w200">
                      <div>时间：2018-09-10</div>
                      <div>设备号：MX7B-1200</div>
                      <div>客户名称：{{v.fName}}</div>
                    </div>
                    <div class="pppImgBox">
                      <img src="../../static/images/facilityImg.jpg" alt="">
                    </div>
                  </div>
                  <pppLine
                    style="width:23vw;height:30vh;"
                    :xdata='v.lineXData'
                    :afterData='v.lineAfterData' 
                    :beforeData='v.lineBeforeData'></pppLine>
                </div>
                <div class="fr wbfz49">
                  <div class="pppProgressTitle cfff fs14">月平均开机有效利用率（%）：</div>
                  <div class="pppProgressBox">
                    <div :style="{width:v.fUtilization+'%'}" class="pppProgress cfff tx-c">{{v.fUtilization}}%</div>
                  </div>
                  <pppBar
                    style="width:23vw;height:34vh;"
                    :xdata='v.BarXData'
                    :afterData='v.BarAfterData' 
                    :beforeData='v.BarBeforeData'></pppBar>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </el-main>
  </el-container>
</template>

<script>
  import pppLine from './pppLine.vue'
  import pppBar from './pppBar.vue'
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';

  export default {
    name: 'Index',
    components: {
      'pppLine': pppLine,
      'pppBar': pppBar,
    },

    data () {
      return {
        loading:false,
        pppData:[
          {
            customer:[
              {
                fUtilization:97.5,
                fName:'客户LD',
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[94.2,95,93,94,95,95],
                lineBeforeData:[92,90,91,90,90.5,93],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[4.59,6.38,4.5, 3.9,3,6],
                BarBeforeData:[5.1,7.5,4.5,3.9,3,6],
              },
              {
                fName:'客户LB',
                fUtilization:96.3,
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[94.8,94,95,93,92,97],
                lineBeforeData:[92,92.4,93.5,92,91.2,90],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[5,6.6,5,4.2,3.8,4.6],
                BarBeforeData:[6,7.0,5,4.5,4,5],
              },
              {
                fName:'客户LJ',
                fUtilization:93.1,
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[93.8,95,94,96,93,91],
                lineBeforeData:[92,93.4,92.5,95,90.2,90],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[6,6,5,4,4.8,5],
                BarBeforeData:[7,7,5,4,5.5,5],
              },
              {
                fName:'客户LA',
                fUtilization:94.5,
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[96.8,93,93,94,93,91],
                lineBeforeData:[94,93.4,92.5,92,91.5,90],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[6.8,6.2,4.5,4.2,4.3,4.8],
                BarBeforeData:[7,7,5,4,5.5,5],
              },
            ],
          },
          {
            customer:[
              {
                fUtilization:95.5,
                fName:'客户LE',
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[92.2,94,96,84,93,96],
                lineBeforeData:[91,92,95,80,91.5,96],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[5.4,6.3,4.4,3.4,2.1,5],
                BarBeforeData:[6,6.8,4.8,3.9,2.5,6],
              },
              {
                fName:'客户LF',
                fUtilization:94.3,
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[94.8,94,95,93,92,94],
                lineBeforeData:[92,92.4,93.5,92,91.2,93],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[7,5.6,5,5.2,4.8,7],
                BarBeforeData:[8,6.0,5,5.5,6,7],
              },
              {
                fName:'客户LH',
                fUtilization:96.1,
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[93.8,95,94,96,93,91],
                lineBeforeData:[92,93.4,92.5,95,90.2,90],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[5,4,5,4,4.8,5],
                BarBeforeData:[6,5,5,4,5.5,5],
              },
              {
                fName:'客户LR',
                fUtilization:93.5,
                lineXData:["总指标", "厚度", "断膜", "原料错误", "断料", "设备维护"],
                lineAfterData:[96.8,93,93,94,93,91],
                lineBeforeData:[94,93.4,92.5,92,91.5,90],
                BarXData:["A机筒1区", "A机筒2区", "A机筒3区", "A机筒4区", "A机筒换网区", "A机筒流道区"],
                BarAfterData:[4.8,5.2,4.5,4.2,4.3,4.8],
                BarBeforeData:[6,6,5,5,5.5,5],
              },
            ],
          },
        ]

      }
    },
    created(){
      console.log(this.pppData);
    }
  }
</script>

<style scoped>

</style>
